<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VIM Master - Profile & Achievements</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/main.css">
    <style>
        /* Profile Page Specific Styles */
        .profile-container {
            min-height: 100vh;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        }
        
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(59, 130, 246, 0.6);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.7; }
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        
        @keyframes badgeGlow {
            0% { box-shadow: 0 8px 16px rgba(251, 191, 36, 0.3); }
            100% { box-shadow: 0 8px 16px rgba(251, 191, 36, 0.6), 0 0 20px rgba(251, 191, 36, 0.4); }
        }
        
        .achievement-card, .profile-card {
            animation: fadeInUp 0.8s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .nav-button {
            transition: all 0.3s ease;
        }
        
        .nav-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
        }
    </style>
</head>
<body class="text-gray-200">
    <!-- Floating Particles Background -->
    <div class="floating-particles" id="particles"></div>
    
    <!-- Navigation Bar -->
    <nav class="relative z-10 bg-black/95 backdrop-blur-md border-b border-blue-500/30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="nav-button bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300">
                        🏠 Back to Game
                    </a>
                    <a href="#profile" class="nav-button bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300">
                        👤 Profile
                    </a>
                    <a href="#achievements" class="nav-button bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 hover:to-orange-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300">
                        🏆 Achievements
                    </a>
                </div>
                <div class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">
                    VIM Master Profile
                </div>
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <div class="profile-container relative z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            
            <!-- ASCII Logo Header -->
            <div class="text-center mb-12">
                <pre class="text-yellow-400 text-center text-xs md:text-sm font-mono ascii-logo mb-6" id="ascii-logo">
                </pre>
                <h1 class="text-5xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 mb-4">
                    VIM Master Profile
                </h1>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    Showcase your VIM mastery journey, share achievements, and inspire others to learn the art of text editing
                </p>
            </div>
            
            <!-- Profile Section -->
            <section id="profile" class="mb-16">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 mb-4">
                        🎯 Your Progress Overview
                    </h2>
                    <p class="text-gray-400">Track your VIM learning journey and share your achievements</p>
                </div>
                
                <!-- Profile Card Container -->
                <div id="profile-card-container">
                    <!-- Profile card will be generated here -->
                </div>
            </section>
            
            <!-- Achievements Section -->
            <section id="achievements" class="mb-16">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400 mb-4">
                        🏆 Achievement Showcase
                    </h2>
                    <p class="text-gray-400">Generate beautiful cards for your earned badges and share them on social media</p>
                </div>
                
                <!-- Achievement Cards Container -->
                <div id="achievement-cards-container">
                    <!-- Achievement cards will be generated here -->
                </div>
            </section>
            
            <!-- Social Sharing Section -->
            <section id="social-sharing" class="mb-16">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-400 mb-4">
                        📱 Share Your Success
                    </h2>
                    <p class="text-gray-400">Let the world know about your VIM mastery achievements</p>
                </div>
                
                <!-- Social Share Options -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
                    <!-- Twitter Share -->
                    <div class="bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-xl p-6 border border-blue-500/30 backdrop-blur-sm text-center">
                        <div class="text-4xl mb-4">🐦</div>
                        <h3 class="text-xl font-bold mb-2">Share on Twitter</h3>
                        <p class="text-gray-400 mb-4">Share your achievements with the developer community</p>
                        <button onclick="sharingSystem.shareToTwitter()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 w-full">
                            Tweet Achievement
                        </button>
                    </div>
                    
                    <!-- Facebook Share -->
                    <div class="bg-gradient-to-br from-indigo-500/20 to-indigo-600/20 rounded-xl p-6 border border-indigo-500/30 backdrop-blur-sm text-center">
                        <div class="text-4xl mb-4">📘</div>
                        <h3 class="text-xl font-bold mb-2">Share on Facebook</h3>
                        <p class="text-gray-400 mb-4">Let your friends know about your VIM skills</p>
                        <button onclick="sharingSystem.shareToFacebook()" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 w-full">
                            Share on Facebook
                        </button>
                    </div>
                    
                    <!-- Copy Progress Code -->
                    <div class="bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-xl p-6 border border-green-500/30 backdrop-blur-sm text-center">
                        <div class="text-4xl mb-4">💾</div>
                        <h3 class="text-xl font-bold mb-2">Copy Progress Code</h3>
                        <p class="text-gray-400 mb-4">Save your progress for later or share with friends</p>
                        <button onclick="copyProgressCode()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 w-full">
                            Copy Code
                        </button>
                    </div>
                </div>
            </section>
            
            <!-- GitHub Section -->
            <section id="github-section" class="mb-16">
                <div class="text-center">
                    <div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 rounded-2xl p-8 border border-gray-600/30 backdrop-blur-sm max-w-4xl mx-auto">
                        <div class="text-6xl mb-6">📚</div>
                        <h2 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-gray-300 to-gray-100 mb-4">
                            Open Source & Contributing
                        </h2>
                        <p class="text-gray-400 mb-6 text-lg">
                            VIM Master is an open-source project. View the source code, report issues, or contribute to make it even better!
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4 justify-center">
                            <a href="https://github.com/renzorlive/vimmaster" target="_blank" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 inline-flex items-center justify-center gap-2">
                                <span>📖</span>
                                View on GitHub
                            </a>
                            <a href="https://github.com/renzorlive/vimmaster/issues" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 inline-flex items-center justify-center gap-2">
                                <span>🐛</span>
                                Report Issues
                            </a>
                            <a href="https://github.com/renzorlive/vimmaster/pulls" target="_blank" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 inline-flex items-center justify-center gap-2">
                                <span>🤝</span>
                                Contribute
                            </a>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- Footer -->
            <footer class="text-center py-8 border-t border-gray-600/30">
                <p class="text-gray-400">
                    Made with ❤️ for my son Zeni and the VIM community | 
                    <a href="https://github.com/renzorlive/vimmaster" target="_blank" class="text-blue-400 hover:text-blue-300 transition-colors">
                        View Source
                    </a>
                </p>
            </footer>
        </div>
    </div>
    
    <!-- Load JavaScript modules -->
    <script type="module" src="js/profile-page.js"></script>
</body>
</html>
